<template>
	<view class="meal" @click="goDishesDetails" >
		<!-- 		<view class="icons flex_align_conter">
			<image style="width: 40rpx;height: 40rpx;" src="@/static/images/icons/meal_1.svg" mode=""></image>
			<view class="title">
				早餐
			</view>
		</view> -->

		<view class="flex" v-if="item.comboId">
			<!-- <image style="width: 170rpx;height: 170rpx;border-radius: 16rpx;" :src="item.coverImage" mode=""></image> -->
			<image v-if="item.coverImage && JSON.parse(item.coverImage).length > 0"
				style="width: 170rpx;height: 170rpx;border-radius: 16rpx;" :src="JSON.parse(item.coverImage)[0].url"
				mode="aspectFill"></image>
			<view class="combo">
				<view class="flex_between">
					<view class="f18">
						{{item.comboName}}
					</view>
					<view class="num f18" style="font-size: 60rpx;">
						×{{item.saleNum}}
					</view>
				</view>
				<view class="describe" >
					<view class="f18" v-for="i in item.listItem">
						<view class="f18" v-if="i.type == 1">
							<text >主菜：{{i.foodDish.foodName}}</text>
							<text v-if="i.foodDish.huisType==1" style="padding-left: 5rpx;">🐷</text>
							<text v-if="i.foodDish.peType==1" style="padding-left: 5rpx;">🌶</text>
							<text v-if="i.foodDish.peType==2" style="padding-left: 5rpx;">🌶</text>
							<text v-if="i.foodDish.peType==2" style="padding-left: 5rpx;">🌶</text>
							<text v-if="i.foodDish.peType==3" style="padding-left: 5rpx;">🌶</text>
							<text v-if="i.foodDish.peType==3" style="padding-left: 5rpx;">🌶</text>
							<text v-if="i.foodDish.peType==3" style="padding-left: 5rpx;">🌶</text>
						</view>
						<view class="f18" v-if="i.type == 2">
							<text  >配菜：{{i.foodDish.foodName}}</text>
							<text v-if="i.foodDish.huisType==1" style="padding-left: 5rpx;">🐷</text>
							<text v-if="i.foodDish.peType==1" style="padding-left: 5rpx;">🌶</text>
							<text v-if="i.foodDish.peType==2" style="padding-left: 5rpx;">🌶</text>
							<text v-if="i.foodDish.peType==2" style="padding-left: 5rpx;">🌶</text>
							<text v-if="i.foodDish.peType==3" style="padding-left: 5rpx;">🌶</text>
							<text v-if="i.foodDish.peType==3" style="padding-left: 5rpx;">🌶</text>
							<text v-if="i.foodDish.peType==3" style="padding-left: 5rpx;">🌶</text>
						</view>
						<view class="f18 flex" v-if="i.type == 3"   style="display: flex; align-items: center;">
							<text  >主食：{{i.foodDish.foodName}}</text>
							<text v-if="i.foodDish.huisType==1" style="padding-left: 5rpx;">🐷</text>
							<text v-if="i.foodDish.peType==1" style="padding-left: 5rpx;">🌶</text>
							<text v-if="i.foodDish.peType==2" style="padding-left: 5rpx;">🌶</text>
							<text v-if="i.foodDish.peType==2" style="padding-left: 5rpx;">🌶</text>
							<text v-if="i.foodDish.peType==3" style="padding-left: 5rpx;">🌶</text>
							<text v-if="i.foodDish.peType==3" style="padding-left: 5rpx;">🌶</text>
							<text v-if="i.foodDish.peType==3" style="padding-left: 5rpx;">🌶</text>
						</view>
						<view class="f18" v-if="i.type == 4">
							<text>汤类：{{i.foodDish.foodName}}</text>
							<text v-if="i.foodDish.huisType==1" style="padding-left: 5rpx;">🐷</text>
							<text v-if="i.foodDish.peType==1" style="padding-left: 5rpx;">🌶</text>
							<text v-if="i.foodDish.peType==2" style="padding-left: 5rpx;">🌶</text>
							<text v-if="i.foodDish.peType==2" style="padding-left: 5rpx;">🌶</text>
							<text v-if="i.foodDish.peType==3" style="padding-left: 5rpx;">🌶</text>
							<text v-if="i.foodDish.peType==3" style="padding-left: 5rpx;">🌶</text>
							<text v-if="i.foodDish.peType==3" style="padding-left: 5rpx;">🌶</text>
						</view>
					</view>

					<!-- <view>主菜：鱼香肉丝</view>
					<view>配菜：宫保鸡丁、红烧肉 </view>
					<view>主食：米饭 </view>
					<view>汤类：紫菜蛋花汤</view> -->
				</view>
			</view>
		</view>
		<view class="flex" v-else-if="item.foodId">
			<!-- <image style="width: 170rpx;height: 170rpx;border-radius: 16rpx;" :src="item.coverImage" mode=""></image> -->
			<image v-if="item.image && JSON.parse(item.image).length > 0"
				style="width: 170rpx;height: 170rpx;border-radius: 16rpx;" :src="JSON.parse(item.image)[0].url"
				mode="aspectFill"></image>
			<view class="combo">
				<view class="flex_between">
					<view class="flex f18" style="display: flex;align-items: center;">
						<text>{{item.foodName}}</text>
						<text v-if="item.huisType==1" style="padding-left: 5rpx;">🐷</text>
						<text v-if="item.peType==1" style="padding-left: 5rpx;">🌶</text>
						<text v-if="item.peType==2" style="padding-left: 5rpx;">🌶</text>
						<text v-if="item.peType==2" style="padding-left: 5rpx;">🌶</text>
						<text v-if="item.peType==3" style="padding-left: 5rpx;">🌶</text>
						<text v-if="item.peType==3" style="padding-left: 5rpx;">🌶</text>
						<text v-if="item.peType==3" style="padding-left: 5rpx;">🌶</text>
					</view>
					<view class="num f18">
						×{{item.saleNum}}
					</view>
				</view>
				<view class="describe flex_align_conter f18"
					v-if="tableCuisine.filter(el=>el.dictLabel == '食材清单').length > 0 && tableCuisine.filter(el=>el.dictLabel == '食材清单')[0].dictValue == 1">
					食材：
					<view class="f18" v-for="(i,index) in item.foodIngredientsDishList">
						{{i.ingredientsName}}<span v-if="index != item.foodIngredientsDishList.length-1">、</span>
						<!-- <view class="" v-else-if="i.type == 2">
							配菜：{{i.foodDish.foodName}}
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="comboPopup" type="bottom" class="">
			<comboDetailsView ref="comboDetailsView" v-if="comboId" :date="date" @closePopup="closePopup" :comboId="comboId"
				:showShopping="false" />
		</uni-popup>
	</view>
	</view>
</template>

<script>
	import comboDetailsView from '@/components/common/comboDetailsView.vue'
	import {
		listData,
		getData,
		delData,
		addData,
		updateData
	} from "@/api/system/dict/data"

	export default {
		props: {
			availablePreview: {
				type: Boolean,
				default: false
			},
			item: {
				type: Object,
				default: () => {}
			},
			date:{
				type:String,
				default: () => {}
			}
		},
		components: {
			comboDetailsView
		},
		data() {
			return {
				comboId: '',
				tableColumn: [],
				tableCuisine: []
			}
		},
		created() {
			console.log(this.item)
			this.dictdata()
		},
		methods: {
			async dictdata() {
				const res = await listData({
					dictType: "combo_column",
					pageSize: 99,
					pageNum: 1
				})

				const data = await listData({
					dictType: "cuisine_column",
					pageSize: 99,
					pageNum: 1
				})
				console.log(res)

				const T = JSON.parse(JSON.stringify(res.rows));
				// const U = {}
				// T.forEach(el => {
				//   U[el.dictLabel] = el.dictValue
				// })

				const S = JSON.parse(JSON.stringify(data.rows));
				// 		const I = {}
				// 		S.forEach(el => {
				// 		  I[el.dictLabel] = el.dictValue
				// 		})

				this.tableColumn = T;
				this.tableCuisine = S;
				console.log(this.tableCuisine)
			},
			closePopup() {
				// console.log('closePopup');
				this.$refs.comboPopup.close()
				this.comboId = null
			},
			goDishesDetails() {
				if (!this.availablePreview) return
				if (this.item.foodId) {
					// 菜品
					this.$tab.navigateTo(
						`/pages/reserve/dishesDetails?id=${this.item.foodId}`
					)
				} else if (this.item.comboId) {
					const tableColumn = this.tableColumn.filter(item => item.dictValue == 1)
					const tableCuisine = this.tableColumn.filter(item => item.dictValue == 1)
					console.log('111', this.item, tableColumn, tableCuisine);
					this.comboId = this.item.comboId
					this.$nextTick(() => {
						this.$refs.comboDetailsView.getComboDetail()
						this.$refs.comboDetailsView.tableColumn = tableColumn
						this.$refs.comboDetailsView.tableCuisine = tableCuisine
						this.$refs.comboPopup.open()
					})
					// 套餐
					// this.$emit('comboDetails', this.item)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.meal {
		// margin-top: 10rpx;
		padding: 20rpx 0;
		// padding: 30rpx;
		// .icons {
		// 	margin-bottom: 12rpx;

		// 	.title {
		// 		margin-left: 10rpx;
		// 		display: inline-block;
		// 		border-radius: 8rpx;
		// 		/* 主色 */
		// 		background: #E6F7F1;
		// 		font-size: 20rpx;
		// 		color: #0EB275;
		// 		padding: 10rpx 20rpx;
		// 	}
		// }

		.combo {
			flex: 1;
			margin-left: 20rpx;

			.num {
				font-size: 28rpx;
				color: #0EB275;
				// color: #848484;
			}
		}

		.describe {
			font-weight: 350;
			margin-top: 16rpx;
			font-size: 20rpx;
		}

		.num {
			display: flex;
			align-items: end;
			justify-content: end;
			width: 60rpx;
			font-size: 28rpx;
			color: #0EB275;
		}
	}
</style>